<template>
  <div class="attr-index-card">
    <div class="card-header">
      <span>{{ props.attrIndex.keyName }}</span>
    </div>
    <div v-if="props.activateRadio === 1" style="padding: 0 16px; font-size: 28px; color: #4268EF;">
      <span>{{ props.attrIndex.value || 0 }}</span>
      <span class="ml-3">{{ props.attrIndex.unit }}</span>
    </div>
    <div v-if="props.activateRadio === 2" class="card-content">
      <el-radio-group v-if="props.attrIndex.dataType === 'BOOLEAN'" v-model="attrValue">
        <el-radio :label="0" size="large">启动</el-radio>
        <el-radio :label="1" size="large">复位</el-radio>
      </el-radio-group>
      <el-input v-else v-model="attrValue" style="width: 128px;">
        <template #append>{{ props.attrIndex.unit }}</template>
      </el-input>
      <img src="@/assets/imgs/avatar.jpg" height="40px" width="40px" alt=""/>
    </div>
    <div v-if="props.activateRadio === 1" style="display: flex; justify-content: end; padding: 12px;">
      <el-button link type="info" @click="handleTrend">趋势图</el-button>
    </div>
    <div v-if="props.activateRadio === 2" class="card-bottom">
      <el-button-group style="display: flex; flex: 1;">
        <el-button type="primary" text style="flex: 1;"  @click="handleRead" size="large">读取</el-button>
        <div style="width: 0; height: 20px; margin: 10px 0; border-left: 1px solid #bbb;"></div>
        <el-button type="primary" text style="flex: 1;" @click="handleWriteIn" size="large">写入</el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getDeviceAttrValue } from '@/api/vs/vacuumdeviceattr/index'

const props = defineProps({
  attrIndex: {
    type: Object,
    default: () => {
      return {
        title: '实时真空度',
        value: '56',
        unit: '%',
      }
    }
  },
  activateRadio: {
    type: Number,
    default: 1
  },
  deviceId: {
    type: Number,
    default: 0
  }
})

// 属性绑定值
const attrValue = ref()

// 点击读取按钮触发
const handleRead = async() => {
  // 获取设备属性值
  try {
    const params = {
      deviceId: props.deviceId,
      attrKey: props.attrIndex.attrKey
    }
    const res = await getDeviceAttrValue(params)
    attrValue.value = Number(res.value)
  } catch (error) {
    console.log(error)    
  }
}


// 点击写入按钮触发
const handleWriteIn = () => {

}

// 点击趋势图触发
const handleTrend = () => {

}
</script>

<style scoped lang="scss">
.attr-index-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 8px;
  flex-basis: calc((100% - 48px) / 4); /* 每个项目基础宽度为容器宽度的四分之一 */
  box-sizing: border-box; /* 防止padding影响实际宽度 */

  .card-header {
    display: flex;
    padding: 12px 8px;
    align-items: center;
    justify-content: space-between;
  }

  .card-content {
    display: flex;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
  }

  .card-bottom {
    display: flex;
    margin-top: 20px;
    border-top: 1px solid #bbb;
    align-items: center;
  }
}
</style>